<template>
  <div>
    <el-upload ref="upload"
               action=""
               :http-request="upload"
               :data="attachData"
               :file-list="attachList"
               :on-progress="uploadProgress"
               :before-upload="beforeUpload"
               multiple
               list-type="picture">
      <el-button type="primary">点击上传</el-button>
      <div slot="tip"
           class="el-upload__tip">只能上传pdf/zip/rar/7z文件，且不超过10MB</div>
      <div slot="file"
           slot-scope="{file}">
        <div class="el-upload-list__item-thumbnail"
             :style="`background:url(${image});background-repeat:no-repeat;background-position:center top;background-size:80% auto;position:relative;`">
          <span style="position:absolute;top:50%;left:0;display:block;width:100%;text-align:center;color:#ffffff;height:30px;line-height:30px;font-weight:bold;margin-top:-15px;letter-spacing:2px;">
            {{ selectExtImage(file) }}</span>
        </div>
        <a class="el-upload-list__item-name"
           @click="handleDownload(file)">
          <i class="el-icon-document" />{{ file.name }}
        </a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check" />
        </label>
        <i class="el-icon-close"
           @click="handleRemove(file)" />
        <div class="el-progress el-progress--line">
          <el-progress v-if="progress['sk' + file.uid]"
                       :text-inside="true"
                       :stroke-width="2"
                       :percentage="progress['k' + file.uid]" />
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import uploadMixin from '@/utils/alioss'
import image from '@/assets/images/file.png'
import { addContractAttach, delContractAttach } from '@/api/contract'
export default {
  mixins: [uploadMixin],
  props: {
    attachList: {
      default: () => [],
      type: Array
    },
    attachData: {
      default: null,
      type: Object
    }
  },
  data() {
    return {
      progress: {},
      uploadData: {},
      image: image
    }
  },
  methods: {
    beforeUpload(file) {
      this.$set(this.progress, 'k' + file.uid, 0)
      this.$set(this.progress, 'sk' + file.uid, true)
    },
    async upload(file) {
      const url = await this.contractUpload(file)
      if (url) {
        const attach = await addContractAttach({
          contractId: file.data.id,
          name: file.file.name,
          url: url
        })
        this.uploadData['k' + file.file.uid] = { id: attach.id, contractId: attach.contractId, url: url }
        this.$emit('submit')
      } else {
        this.$refs.upload.$data.uploadFiles.splice(-1, 1)
      }
    },
    showProgress(file) {
      if (this.progress['k' + file.uid] && this.progress['k' + file.uid] < 100) {
        return true
      }
      return false
    },
    uploadProgress(e, file) {
      this.$set(this.progress, 'k' + file.uid, e)
    },
    handleRemove(file) {
      this.$confirm('您将删除' + file.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.$refs.upload.$data.uploadFiles.findIndex(data => data.uid == file.uid)
        if (file.id != null) {
          delContractAttach({
            attachId: file.id,
            contractId: file.contractId
          }).then(res => {
            this.$refs.upload.$data.uploadFiles.splice(index, 1)
          })
        } else {
          delContractAttach({
            attachId: this.uploadData['k' + file.uid].id,
            contractId: this.uploadData['k' + file.uid].contractId
          }).then(res => {
            this.$refs.upload.$data.uploadFiles.splice(index, 1)
          })
        }
        this.$emit('submit')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleDownload(file) {
      if (file.id != null) {
        window.open(file.url)
      } else {
        window.open(this.uploadData['k' + file.uid])
      }
    },
    selectExtImage(file) {
      const tmpcnt = file.name.lastIndexOf('.')
      return file.name.substring(tmpcnt + 1)
    }
  }
}
</script>
